<script setup>
import { ref, watch, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { abtswmApi, joinweApi, contactweApi, commcoopApi, helpcoreApi } from '../../api/index'
import { useRouter, useRoute } from 'vue-router'
import { useStorage } from '@vueuse/core'
const tabs = ref(useStorage('abtid').value)
const text = ref('')
const imgs = ref('')
const time = ref('')
// 关于我们
const abtswm = async function () {
  const msg = await abtswmApi()
  if (msg.data.code == 0) {
    time.value = msg.data.data.updated
    imgs.value = msg.data.data.thumb
    text.value = msg.data.data.text
  } 
}
// 加入我们
const joinwe = async function () {
  const msg = await joinweApi()
  if (msg.data.code == 0) {
    time.value = msg.data.data.updated
    text.value = msg.data.data.text
  }
}
// 联系我们
const contactwe = async function () {
  const msg = await contactweApi()
  if (msg.data.code == 0) {
    time.value = msg.data.data.updated

    text.value = msg.data.data.text
  }
}
// 商务合作
const commcoop = async function () {
  const msg = await commcoopApi()
  if (msg.data.code == 0) {
    time.value = msg.data.data.updated
    text.value = msg.data.data.text
  }
}
// 帮助中心
const helpcore = async function () {
  const msg = await helpcoreApi()
  if (msg.data.code == 0) {
    time.value = msg.data.data.updated
    text.value = msg.data.data.text
  }
}
// 切换
const tabsswitch = function (val) {
  useStorage('abtid').value = val
}

const tabsshow = function (val) {
  if (val== 1) {
    abtswm()
  } else if (val == 2) {
    joinwe()
  } else if (val == 3) {
    contactwe()
  }else if (val == 4) {
    commcoop()
  }else if (val == 5) {
    helpcore()
  }
}

watch(() => useStorage('abtid').value, newid => {
    tabs.value = newid
  if (newid== 1) {
    abtswm()
  } else if (newid == 2) {
    joinwe()
  } else if (newid == 3) {
    contactwe()
  }else if (newid == 4) {
    commcoop()
  }else if (newid == 5) {
    helpcore()
  }
})
onMounted(() => {
  tabsshow(tabs.value)
})
</script>
<template>
  <div class="banner"></div>
  <div class="tit">
    <div class="main">
      <div class="inner" id="focus" style="width: 960px;">
        <div class="lb" :class="{'on':tabs==1}"  @click="tabsswitch(1)">关于我们</div>
        <div class="lb" :class="{'on':tabs==2}" @click="tabsswitch(2)">加入我们</div>
        <div class="lb" :class="{'on':tabs==3}" @click="tabsswitch(3)">联系我们</div>
        <div class="lb" :class="{'on':tabs==4}" @click="tabsswitch(4)">商务合作</div>
        <div class="lb" :class="{'on':tabs==5}" @click="tabsswitch(5)">帮助中心</div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="news_left">
      <div class="left_box">
        <div class="main_box2"  >
          <div class="details_box">
            <p align="center" style="margin-bottom: 30px;"></p>
            <div style="font-size: 14px;display: flex;height: 40px;justify-content: center">
              <span v-if="tabs==1" style="font-size: 36px;margin-right: 7px;font-weight: 600;">关于我们 
                <span style="font-size: 12px;">
                  {{ time }}
                </span>
             </span>
              <span v-if="tabs==2" style="font-size: 36px;margin-right: 7px;font-weight: 600;">
                加入我们
                <span style="font-size: 12px;">
                  {{ time }}
                </span>
              </span>
              <span v-if="tabs==3" style="font-size: 36px;margin-right: 7px;font-weight: 600;">
                联系我们
                <span style="font-size: 12px;">
                  {{ time }}
                </span>
              </span>
              <span v-if="tabs==4" style="font-size: 36px;margin-right: 7px;font-weight: 600;">
                商务合作
                <span style="font-size: 12px;">
                  {{ time }}
                </span>
              </span>
              <span v-if="tabs==5" style="font-size: 36px;margin-right: 7px;font-weight: 600;">
                帮助中心
                <span style="font-size: 12px;">
                  {{ time }}
                </span>
              </span>
             </div>
            <el-divider />
            <div v-html="text"></div>
          </div>
          <div style="clear:both;"></div>
        </div>
    </div>
   
  </div>




</div>
<div style="clear:both"></div></template>
<style scoped>
:deep(.el-divider){
  margin: 10px 0 0 0;
}
</style>